<template>
  <div class="filter-header">
    <div class="filter-item">
      <span class="label">通知类型:</span>
      <el-select
        v-model="filterOptions.type"
        placeholder="请选择"
        class="select-item"
        style="width: 140px"
      >
        <el-option
          v-for="item in MSG_TYPE_LIST"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="filter-item">
      <span class="label">发布对象:</span>
      <el-cascader
        placeholder="请选择班级"
        class="cascader-item"
        popper-class="cascader-item-popper"
        v-model="filterOptions.receiver"
        :options="receiverData"
        :popper-append-to-body="false"
        :clearable="false"
        style="width: 210px"
      ></el-cascader>
    </div>
    <div class="filter-item">
      <span class="label">发布状态:</span>
      <el-select
        v-model="filterOptions.status"
        placeholder="请选择"
        class="select-item"
        style="width: 140px"
      >
        <el-option
          v-for="item in MSG_STATUS_LIST"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useAuthStore } from '@/stores'
import { storeToRefs } from 'pinia'
import {
  MSG_TYPE_LIST,
  MSG_STATUS_LIST,
  MsgStatusEnum,
  MsgReceiverEnum
} from '../constant'

const authStore = useAuthStore()
const { getTeachingInfo } = authStore
const {
  tbAdminAndTeachingClassList,
  tbTargetClassList,
  smartRoomClassList,
  nowGlobalRole
} = storeToRefs(authStore)

const filterOptions = reactive({
  type: 0, // 通知类型
  receiver: [0], // 发布对象
  status: MsgStatusEnum.PUBLISHED // 发布状态
})

const receiverData = ref([])

// 获取全部发布对象
const getAllClassList = async () => {
  await getTeachingInfo(nowGlobalRole.value.role_code)
  const allClassList = []
  // 行政及教学班
  if (tbAdminAndTeachingClassList.value?.length) {
    const classTypeMap = {
      'class_category|1001': 1,
      'class_category|1002': 2
    }
    // TODO 后续加上切换学校后处理多个学校的情况，目前暂时只取第一个学校的数据
    const [school] = tbAdminAndTeachingClassList.value
    const adminTeachingClass = school?.grade_list?.map(gradeItem => {
      return {
        label: gradeItem.grade_name,
        value: gradeItem.grade_num,
        grade_id: gradeItem.grade_id,
        children: gradeItem.class_list?.map(cls => ({
          label: cls.class_name,
          value: cls.id,
          class_type: classTypeMap[cls.class_type]
        }))
      }
    })
    allClassList.push(...adminTeachingClass)
  }
  // 靶向班
  const targetClass = {
    label: '靶向班',
    // value 代表的年级，发消息用不到该字段随便传一个
    value: 0,
    children: tbTargetClassList.value.map(cls => {
      return {
        label: cls.class_name,
        value: cls.id,
        grade_id: cls.grade_id,
        grade_num: cls.grade_num,
        class_type: 3
      }
    })
  }
  // 智习班
  const smartClass = {
    label: '智习班',
    value: 0,
    children: smartRoomClassList.value.map(cls => {
      return {
        label: cls.class_name,
        value: cls.id,
        grade_id: cls.grade_id,
        grade_num: cls.grade_num,
        class_type: 4
      }
    })
  }
  // 靶向班和智习班只在有下层班级的时候才加为选项
  targetClass.children.length && allClassList.push(targetClass)
  smartClass.children.length && allClassList.push(smartClass)
  return allClassList
}

const initData = async () => {
  receiverData.value = [
    {
      label: '全部对象',
      value: 0
    },
    {
      label: '按班发送',
      value: MsgReceiverEnum.CLASSROOM,
      children: []
    },
    {
      label: '按人发送',
      value: MsgReceiverEnum.STUDENTS,
      children: []
    }
  ]
  const classList = await getAllClassList()
  console.log('header filter =>', classList)
  receiverData.value[1].children = [...classList]
}

initData()

defineExpose({
  filterOptions
})
</script>

<style lang="less" scoped>
.filter-header {
  width: 100%;
  display: flex;
  font-size: 16px;
  .filter-item {
    display: flex;
    align-items: center;
    margin-right: 40px;
    .label {
      margin-right: 10px;
    }
  }
}
</style>
